<template>
<div class="index-page">
    <el-container class="box-wrap">
        <nav-header></nav-header>
        <el-container class="con-mid">
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        <nav-footer></nav-footer>
    </el-container>
</div>
</template>

<script>
import NavHeader from '@/components/navHeader'
import NavFooter from '@/components/navFooter'
export default {
    name: 'Index',
    components: { NavHeader, NavFooter },
    data () {
        return {

        }
    },
    mounted () {
    },
    methods: {

    }
}
</script>

<style lang="less">
.index-page {
    .box-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column
    }
    .el-main {
        padding: 0;
        background: #fbfafa;
    }
    .con-mid {
        height: calc(100% - 96px);
    }
}
</style>
